<template>
  <div class="metting">
    <header>
      <webHader
        title="自定义菜单"
        crumbs="主页,自定义菜单,申请"
        :backgroundImageUrl="headerBg"
      />
    </header>
    <div class="section">
      <div class="content">
        <div class="title">入会申请</div>
        <div class="form">
          <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            label-position="left"
            class="application-form"
          >
            <el-form-item label="机构全称" prop="orgName">
              <el-input
                v-model="formData.orgName"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="机构简称" prop="orgShortName">
              <el-input
                v-model="formData.orgShortName"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="所在地址" required>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item prop="province" style="margin-bottom: 0">
                    <el-select
                      v-model="formData.province"
                      placeholder="请选择省份"
                      size="large"
                    >
                      <el-option label="省份1" value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="city" style="margin-bottom: 0">
                    <el-select
                      v-model="formData.city"
                      placeholder="请选择城市"
                      size="large"
                    >
                      <el-option label="城市1" value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item prop="district" style="margin-bottom: 0">
                    <el-select
                      v-model="formData.district"
                      placeholder="请选择区域"
                      size="large"
                    >
                      <el-option label="区域1" value="1" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="机构地址" prop="address">
              <el-input
                v-model="formData.address"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="联系人" prop="contactPerson">
              <el-input
                v-model="formData.contactPerson"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="电话号码" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="邮箱地址" prop="email">
              <el-input
                v-model="formData.email"
                placeholder="请输入"
                size="large"
              />
            </el-form-item>

            <el-form-item label="经营场地" prop="venueType" size="large">
              <el-radio-group v-model="formData.venueType">
                <el-radio label="1">单一场地</el-radio>
                <el-radio label="2">多场地</el-radio>
                <el-radio label="3">连锁经营</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="学员人数" prop="studentCount">
              <el-select
                v-model="formData.studentCount"
                placeholder="请选择"
                size="large"
              >
                <el-option label="0-100人" value="1" />
                <el-option label="101-500人" value="2" />
                <el-option label="501-1000人" value="3" />
                <el-option label="1000人以上" value="4" />
              </el-select>
            </el-form-item>
          </el-form>
          <el-row class="btns">
            <button @click="onSubmit" class="submit">提交</button>
            <button @click="onSave" class="save">保存</button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import headerBg from "~/assets/web/activity-header-bg.png";
import { ElMessage } from "element-plus";

const formRef = ref(null);

const formData = reactive({
  orgName: "",
  orgShortName: "",
  province: "",
  city: "",
  district: "",
  address: "",
  contactPerson: "",
  phone: "",
  email: "",
  venueType: "",
  studentCount: "",
});

const rules = {
  orgName: [{ required: true, message: "请输入机构全称", trigger: "blur" }],
  orgShortName: [
    { required: true, message: "请输入机构简称", trigger: "blur" },
  ],
  province: [{ required: true, message: "请选择省份", trigger: "change" }],
  city: [{ required: true, message: "请选择城市", trigger: "change" }],
  district: [{ required: true, message: "请选择区域", trigger: "change" }],
  address: [{ required: true, message: "请输入机构地址", trigger: "blur" }],
  contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入电话号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱格式", trigger: "blur" },
  ],
  venueType: [
    { required: true, message: "请选择经营场地类型", trigger: "change" },
  ],
  studentCount: [
    { required: true, message: "请选择学员人数", trigger: "change" },
  ],
};

const checkutFrom = () => {
  if (!formRef.value) return;
};

const onSubmit = async () => {
  await checkutFrom();
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // TODO: 调用提交API
      ElMessage.success("提交成功");
    } else {
      ElMessage.error("请填写完整所有必填项");
    }
  });
};

const onSave = async () => {
  await checkutFrom();
  // TODO: 调用保存API
  ElMessage.success("保存成功");
};
</script>

<style lang="less" scoped>
.metting {
  background-color: #f5f5f5;
  width: 100%;

  .section {
    width: 100%;
    padding: 30px 104px;
    margin-bottom: 70px;
    box-sizing: border-box;

    .content {
      width: 100%;
      background-color: #ffffff;
      padding: 30px 50px;

      .title {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 30px;
        color: #1e2021;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30px;
      }

      .form {
        .application-form {
          margin-left: 0;

          :deep(.el-form-item__label) {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #1e2021;
            text-align: left;
            display: flex;
            align-items: center;
          }

          :deep(.el-input),
          :deep(.el-select),
          :deep(.el-input__wrapper),
          :deep(.el-select .el-input__wrapper) {
            width: 484px !important;
            box-sizing: border-box;
          }

          :deep(.el-row) {
            .el-select {
              width: 306px !important;
            }
          }

          :deep(.el-input__inner::placeholder) {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #999999;
            text-align: left;
          }

          // 输入内容样式
          :deep(.el-input__inner) {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #1e2021;
            text-align: left;
          }

          :deep(.el-input__wrapper input) {
            font-size: 16px;
          }

          :deep(.el-select__selected-item span) {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #1e2021;
            text-align: left;
          }

          :deep(.is-transparent span) {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 16px;
            color: #999999;
            text-align: left;
          }

          :deep(.el-form-item) {
            align-items: center;
          }
        }

        .btns {
          margin-top: 50px;
          width: 100%;

          button {
            padding: 15px 65px;
            box-sizing: border-box;
            border-radius: 0px 0px 0px 0px;
            border: 1px solid #1e2021;
            cursor: pointer;
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 16px;
            color: #1e2021;
          }

          .submit {
            margin-right: 20px;
            background: var(--theme-gradient-bg);
            border: none;
            color: #ffffff;
          }
        }
      }
    }
  }
}

:deep(.el-radio.is-checked .el-radio__inner) {
  border-color: #226f41 !important;
  background-color: #fff !important;
}

:deep(.el-radio.is-checked .el-radio__inner::after) {
  width: 8px !important;
  height: 8px !important;
  background-color: #226f41 !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

:deep(.el-radio.is-checked .el-radio__label) {
  color: #226f41 !important;
}
</style>
